<template>
  <div>
    <el-container>
      <el-header>
        <Nav>
        <i @click="goclassify" class="el-icon-orange" slot="icon"></i>
        <el-input suffix-icon="el-icon-sunny" slot="input" v-model="input" placeholder="请输入内容" class="input-col"></el-input>
        <el-button @click="gologin" type="text" slot="login">登录</el-button>
        </Nav>
      </el-header>
      <el-main>
        <el-row>
          <Swiper></Swiper>
        </el-row>
        <el-row class="list">
          <el-col
            class="list-item"
            v-for="(item, index) in classifyList"
            :key="index"
          >
            <img :src="item" alt="" />
            <span>{{ classifyName[index] }}</span>
          </el-col>
        </el-row>
        <el-row>
          <List></List>
        </el-row>
      </el-main>
      <el-footer>
        <Footer-Box></Footer-Box>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { Nav } from "../nav/index.js";
import { Swiper } from "../swiper/index.js";
import { List } from "../list/index.js";
import { FooterBox } from "../footerBox/index.js";
import img1 from "./img/京东到家.png";
import img2 from "./img/京东商城.png";
import img3 from "./img/京东新百货.png";
import img4 from "./img/京东生鲜.png";
import img5 from "./img/数码电器.png";
export default {
  data() {
    return {
      classifyList: [img1, img2, img3, img4, img5],
      classifyName: [
        "京东到家",
        "京东商城",
        "京东新百货",
        "京东生鲜",
        "数码电器",
      ],
      input:'',
    };
  },
  components: {
    Nav,
    Swiper,
    List,
    FooterBox,
  },
  methods: {
    goclassify() {
      this.$router.push('/classify');
    },
    gologin() {
      this.$router.push('/login');
    },
  },
};
</script>

<style scoped>
.home {
  display: flex;
  height: 100vh;
}
.el-header {
  height: 44px !important;
  width: 100%;
  position: fixed;
  top: 0px;
  padding: 0px;
  z-index: 10000;
}
.el-main {
  flex-grow: 1;
  padding: 0px;
  padding-top: 44px !important;
  display: flex;
  flex-direction: column;
  background-color: #eee;
  position: absolute;
  z-index: 100;
}
.el-footer {
  height: 50px !important;
  width: 100vw;
  position: fixed;
  bottom: 0px;
  z-index: 1000;
  padding: 0px;
}
.el-icon-orange{
    font-size: 25px;
    color: #fff;
}
.el-button{
    color: #fff;
}
.input-col{
    padding: 7px 0px !important;
    box-sizing: border-box;
}
.input-col >>> .el-input__inner{
    height: 30px;
    border-radius: 20px;
}
.list {
  width: 100%;
  height: 74px !important;
  padding: 1rem 0px;
}
.list-item {
  width: 20%;
  height: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.list-item img {
  width: 60%;
}
.list-item span {
  font-size: 0.5rem;
}
.el-icon-s-operation {
  font-size: 25px !important;
  color: white;
}
.el-button--text {
  color: white;
}
</style>